<template>
  <div class="app-container">
    <div class="custom_card_0" style="padding-top: 0">

      <IntroduceTip :value="6"></IntroduceTip>

      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="车牌号" prop="carNo">
          <el-input v-model="queryParams.carNo" placeholder="请输入车牌号" clearable size="small" @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item label="车型" prop="modelName">
          <el-input v-model="queryParams.modelName" placeholder="请输入车型" clearable size="small" @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item label="所属门店" prop="storeId">
          <el-select v-model="queryParams.storeId" placeholder="请选择所属门店" clearable size="small" filterable remote>
            <el-option
              v-for="(item, i) in storeList"
              :key="item.storeId"
              :label="item.storeName"
              :value="item.storeId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="startTime">
          <el-button icon="el-icon-back" size="mini" @click="changeTime(-1)"></el-button>
          <el-date-picker size="small" v-model="queryParams.startTime" type="date" :clearable="false"
                          :picker-options="{disabledDate: data=> new Date(data).getTime() >( new Date().getTime())}"
                          value-format="yyyy-MM-dd"  style="width: 150px">
          </el-date-picker>
          <el-button  icon="el-icon-right" size="mini" @click="changeTime(1)" :disabled="today==queryParams.startTime"></el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <el-col :span="1.5">

          </el-col>
        </el-form-item>
      </el-form>
    </div>

    <div class="custom_card" style="padding-top: 0">
      <div style="display: flex;justify-content: space-between; align-items: center;margin-bottom: 20px">
         <div>
           <el-tag style="margin-left: 10px;font-size: 14px;color: #3C60E9">车辆总数：{{carEverydayTotal.carTotal||0}}辆</el-tag>
           <el-tag style="margin-left: 10px;font-size: 14px;color: #FF8304">在租车辆总数：{{carEverydayTotal.onStore||0}}辆</el-tag>
           <el-tag style="margin-left: 10px;font-size: 14px;color: #0080FF">出租率：{{(carEverydayTotal.onStore/carEverydayTotal.carTotal*100).toFixed(0)||0}}%</el-tag>
           <el-tag style="margin-left: 10px;font-size: 14px;color: #FF0E34">总收入：{{carEverydayTotal.totalRevenue||0}}元</el-tag>
           <el-tag style="margin-left: 10px;font-size: 14px;color: #08B6B2">总支出：{{carEverydayTotal.rentExpenditure||0}}元</el-tag>
           <el-tag style="margin-left: 10px;font-size: 14px;color: #FF0E34">总合计：{{carEverydayTotal.preTotal||0}}元</el-tag>
         </div>
        <div>
          <el-tooltip placement="right-start">
            <div slot="content" style="font-size: 14px">
              统计每辆车当日出租状态，若车辆出租则展示当日出租的日租金。此模块与财务未强关联，仅代表车辆出租商家可获租金。
            </div>
            <el-button type="text">功能说明&nbsp;<i class="el-icon-warning-outline"></i></el-button>
          </el-tooltip>
          <el-button
            class="sec-plain-btn"
            style="right: 50px;"
            size="medium"
            icon="el-icon-download"
            :loading="exportLoading"
            @click="handleExport"
          >导出</el-button>
        </div>
      </div>
<!--      <el-row :gutter="10" class="mb8" type="flex" justify="space-between">-->
<!--        <el-col :span="20">-->
<!--          <el-tag style="margin-left: 10px;font-size: 14px;color: #3C60E9">车辆总数：{{carEverydayTotal.carTotal||0}}辆</el-tag>-->
<!--          <el-tag style="margin-left: 10px;font-size: 14px;color: #FF8304">在租车辆总数：{{carEverydayTotal.onStore||0}}辆</el-tag>-->
<!--          <el-tag style="margin-left: 10px;font-size: 14px;color: #0080FF">出租率：{{(carEverydayTotal.onStore/carEverydayTotal.carTotal*100).toFixed(0)||0}}%</el-tag>-->
<!--          <el-tag style="margin-left: 10px;font-size: 14px;color: #FF0E34">总收入：{{carEverydayTotal.totalRevenue||0}}元</el-tag>-->
<!--          <el-tag style="margin-left: 10px;font-size: 14px;color: #08B6B2">总支出：{{carEverydayTotal.rentExpenditure||0}}元</el-tag>-->
<!--          <el-tag style="margin-left: 10px;font-size: 14px;color: #FF0E34">总合计：{{carEverydayTotal.preTotal||0}}元</el-tag>-->
<!--        </el-col>-->

<!--        <el-col :span="2">-->
<!--          <el-button-->
<!--            class="sec-plain-btn"-->
<!--            style="right: 50px;"-->
<!--            size="medium"-->
<!--            icon="el-icon-download"-->
<!--            :loading="exportLoading"-->
<!--            @click="handleExport"-->
<!--          >导出</el-button>-->
<!--        </el-col>-->
<!--&lt;!&ndash;        <el-button&ndash;&gt;-->
<!--&lt;!&ndash;          class="top-right-btn sec-plain-btn"&ndash;&gt;-->
<!--&lt;!&ndash;          style="right: 50px;"&ndash;&gt;-->
<!--&lt;!&ndash;          size="medium"&ndash;&gt;-->
<!--&lt;!&ndash;          icon="el-icon-download"&ndash;&gt;-->
<!--&lt;!&ndash;          :loading="exportLoading"&ndash;&gt;-->
<!--&lt;!&ndash;          @click="handleExport"&ndash;&gt;-->
<!--&lt;!&ndash;        >导出</el-button>&ndash;&gt;-->

<!--      </el-row>-->
      <el-table v-loading="loading" :data="CarEverydayStatisticsList" border @sort-change="handleSortChange">
        <el-table-column label="车牌号" min-width="100" align="center" prop="carNo" sortable="custom"/>
        <el-table-column label="车型" min-width="200" show-overflow-tooltip align="center" prop="modelName" />
        <el-table-column label="车辆状态" align="center" prop="carStatus" >
          <template slot-scope="{ row }">
            <el-button size="mini" v-if="row.carStatus=='在租'" type="success">在租</el-button>
            <span v-else>{{ row.carStatus }}</span>

          </template>
        </el-table-column>
        <el-table-column label="所属门店" min-width="150" show-overflow-tooltip align="center" prop="storeName" />
        <el-table-column label="租金收入(元)" align="center" prop="rentalIncome" >
          <template slot-scope="{ row }">
            ￥{{ row.rentalIncome }}
          </template>
        </el-table-column>
        <el-table-column label="其他收入(元)" align="center" prop="otherIncome" >
          <template slot-scope="{ row }">
            ￥{{ row.otherIncome }}
          </template>
        </el-table-column>
        <el-table-column label="收入预合计(元)" align="center" prop="totalRevenue" >
          <template slot-scope="{ row }">
            ￥{{ row.totalRevenue }}
          </template>
        </el-table-column>
        <el-table-column label="租金支出(元)" align="center" prop="rentExpenditure" >
          <template slot-scope="{ row }">
            ￥{{ row.rentExpenditure }}
          </template>
        </el-table-column>
        <el-table-column label="收支预合计(元)" align="center" prop="preTotal" sortable="custom">
          <template slot-scope="{ row }">
            ￥{{ row.preTotal }}
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

  </div>
</template>

<script>
import { carEveryday,exportCarEveryday,carEverydayTotal } from '@/api/bills/financial';
import {getStoreList} from "@/api/car/model";

export default {
  name: "CarEverydayOfSingleCar",
  data() {
    return {
      showTip:true,
      openColumn1:false,
      openColumn2:false,
      openColumn3:false,
      openColumn4:false,
      storeList:[],
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      showSearch: true,
      today : '',
      // 总条数
      total: 0,
      // VIEW表格数据
      CarEverydayStatisticsList: [],
      carEverydayTotal: {
        carTotal:0,
        onStore:0,
        totalRevenue:0,
        rentExpenditure:0,
        preTotal:0
      },

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        storeId: null,
        startTime: this.parseTime(new Date(),'{y}-{m}-{d}'),
        carNo: null,
        modelName: null
      }
    };
  },
  created() {
    this.today = this.parseTime(new Date(),'{y}-{m}-{d}');
    this.getList();
    getStoreList().then((response) => {
      this.storeList = response.data
    })
  },
  methods: {
    closeTip(){
      this.showTip = false;
    },
    changeTime(num){
      this.queryParams.startTime=this.parseTime(new Date(this.queryParams.startTime).getTime()+num*24*60*60*1000,'{y}-{m}-{d}');
      this.handleQuery()
    },
    /** 查询VIEW列表 */
    getList() {
      this.loading = true;
      if(!this.queryParams.startTime){
        this.queryParams.startTime= this.parseTime(new Date(),'{y}-{m}-{d}')
      }
      if(!this.queryParams.sort){
        this.queryParams.sort = 'preTotal';
        this.queryParams.order = 'desc';
      }
      carEverydayTotal(this.queryParams).then(response => {
        this.carEverydayTotal = response.data;
      });
      carEveryday(this.queryParams).then(response => {
        this.CarEverydayStatisticsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 排序触发事件 */
    handleSortChange(column, prop, order) {
      this.queryParams.sort = column.prop
      this.queryParams.order = column.order==='descending'?'desc':column.order==='ascending'?'asc':column.order
      this.getList()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.startTime= this.parseTime(new Date(),'{y}-{m}-{d}')
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$modal.confirm('是否确认导出所有数据项？').then(() => {
        this.exportLoading = true;
        return exportCarEveryday(queryParams);
      }).then(response => {
        this.$download.name(response.msg);
        this.exportLoading = false;
      }).catch(() => {});
    }
  }
};
</script>
<style>
.table_annotate {
  background: linear-gradient(270deg, rgb(141, 171, 245) 0%, rgb(84, 115, 232) 100%);
  border-radius: 18px;
  font-weight: 400;
  color: rgb(255, 255, 255);
  line-height: 20px;
  font-size: 14px;
  position: absolute;
  z-index: 18;
  margin-top: 10px;
}
</style>
